<template>
  <a-layout-sider class=" max-h-full overflow-auto" :theme="theme" :trigger="null" collapsible v-model="collapsed">
    <!-- <div class="logo" :style="{justifyContent: (collapsed? 'center': 'flex-start')}" >
      <div class="system-name" :style="{color: (theme === 'dark'? 'rgba(255, 255, 255, 0.65)': 'rgba(0, 0, 0, 0.65)')}" v-show="!collapsed">测试平台</div>
    </div> -->
    <a-menu
      :defaultSelectedKeys="['1']"
      :defaultOpenKeys="['sub1']"
      mode="inline"
      :theme="theme"
      :inlineCollapsed="collapsed"
      class="flex-grow"
    >
      <a-menu-item key="xtsy">
        <router-link to="/index">
          <a-icon type="home" />
          <span>
            系统首页
          </span>
        </router-link>
      </a-menu-item>
      
      <a-sub-menu v-for="sub in menuList" :key="sub.id"   >
        <span slot="title">
          <i data-v-3e708f1c="" aria-label="图标: appstore" class="anticon">
            <img :src="require('@img/menu/' + sub.icon + '.png')" class="normal" alt="">
            <img :src="require('@img/menu/' + sub.icon + '-active.png')" class="active" alt="">
            <!-- <svg viewBox="64 64 896 896" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
              <path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path>
            </svg> -->
          </i>
          <span>{{sub.name}}</span>
        </span>
        <a-menu-item style="padding-left: 19px;" v-for="node in sub.childrenList" :key="node.id" @click="go(node.path)">
          <!-- <a-icon :type="node.icon || 'home'" /> -->
          {{node.name}}
        </a-menu-item>
      </a-sub-menu>
      <!-- <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="appstore" /><span>系统设置</span></span>
        <a-menu-item key="9">用户管理</a-menu-item>
        <a-menu-item key="10">角色管理</a-menu-item>
        <a-menu-item key="11">菜单管理</a-menu-item>
        <a-menu-item key="12">接口管理</a-menu-item>
      </a-sub-menu> -->
     
    </a-menu>
  </a-layout-sider>
</template>
<script>
import Bus from "@common/bus";
export default {
  name: "Sider",
  data() {
    return {
      collapsed: false,
      theme: 'light',
      list: JSON.parse(sessionStorage.getItem('menuList'))
    };
  },
  computed: {
    menuList(){
      return this.list.map(menu => {
        if (menu.childrenList && menu.childrenList.length) {
          menu.childrenList = menu.childrenList.filter(item => item.level != '1')
        }
        return menu;
      })
    },
  },
  created() {
    Bus.$on("collapsed", item => {
      this.collapsed = item;
    });
    Bus.$on("theme", item => {
      this.theme = item;
    });
 
   
  },
  mounted(){
//    this.$nextTick(()=>{
//  var a = document.getElementsByClassName('ant-menu-submenu-arrow')
//     })
  },
  methods: {
    go(path){
      this.$router.push(`${path}`);
    },
    //  customExpandIcon(props){
    //     console.log(props)
    //     // if(props.record.children.length > 0){
    //         if (props.expanded) {
    //             return <a style={{ color: 'black',marginRight:8 }} onClick={e => {
    //                 props.onExpand(props.record, e);
    //             }}><a-button type="link">关闭详情</a-button></a>
    //         } else {
    //             return <a style={{ color: 'black' ,marginRight:8 }} onClick={e => {
    //                 props.onExpand(props.record, e);
    //             }}><a-button type="link">查看详情</a-button></a>
    //         }
    //     // }else{
    //     //     return <span style={{marginRight:8 }}></span>
    //     // }
    // }

   


  }
};
</script>

<style lang="less" scoped>
.ant-menu-submenu{
  .normal{
    display: block;
  }
  .active{
    display: none;
  }
}
.ant-menu-submenu-selected{
  .normal{
    display: none;
  }
  .active{
    display: block;
  }
}
/deep/ .ant-layout-sider-children{
  display: flex;
  flex-direction: column;
}
.ant-layout-sider:not(.ant-layout-sider-collapsed) {
  max-width: 220px !important;
  min-width: 220px !important;
}
.ant-menu-root:not(.ant-menu-inline-collapsed) > .ant-menu-item:nth-of-type(1) > a{
  display: flex;
  align-items: center;
}
.ant-menu-root:not(.ant-menu-inline-collapsed) > .ant-menu-item{
  &>a{
    color: rgba(0, 0, 0, 0.65);;
  }
  min-height: 56px;
  padding-left: 19px !important;
  margin: 0px;
  display: flex;
  align-items: center;
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  letter-spacing: 0em;
  .router-link-active{
    display: flex;
    align-items: center;
  }
}
.ant-menu-submenu {
  &:not(.ant-menu-submenu-open){
    color: rgba(0, 0, 0, 0.65);;
  }
  min-height: 56px !important;
  font-family: Microsoft YaHei;
  font-style: normal;
  font-weight: normal;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /deep/ .ant-menu-submenu-title{
    padding-left: 19px !important;
    font-size: 16px !important;
    min-height: 56px !important;
    display: flex;
    align-items: center;
    &>span{
      display: flex;
      align-items: center;
    }
    .ant-menu-submenu-arrow{
      right: 12px;
    }
  }
  .ant-menu-item{
    color: rgba(0, 0, 0, 0.65);;
    margin: 0 !important;
    // background: #EAECF1;
    min-height: 48px;
    padding-left: 64px !important;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 18px;
  }
}
// .ant-menu-submenu-selected, .ant-menu-item-selected {
//     color: #276EB5;
// }
.ant-menu:not(.ant-menu-horizontal) > .ant-menu-item-selected {
    background-color: rgba(221, 76, 76, 0.15);
}
// .ant-menu-item-selected, .ant-menu-item-selected > a {
//   color: #000;
// }
// .menu-common {
//   /deep/ .ant-menu-item:not(.ant-menu-item-selected):before
//    {
//     content: "";
//     position: absolute;
//     left: 0;
//     top: 0;
//     width: 0;
//     height: 100%;
//     -webkit-transition: width 0.6s;
//     transition: width 0.6s;
//     z-index: -1;
//   }
//   /deep/ .ant-menu-submenu-title:before
//    {
//     content: "";
//     position: absolute;
//     left: 0;
//     top: 0;
//     width: 0;
//     height: 100%;
//     -webkit-transition: width 0.6s;
//     transition: width 0.6s;
//     z-index: -1;
//   }
  
//   /deep/ .ant-menu-item:not(.ant-menu-item-selected) {
//     z-index: 0;
//   }
  
//   /deep/ .ant-menu-submenu-title:hover {
//     z-index: 0;
//     background-color: transparent;
//   }
  
  
//   /deep/ .ant-menu-item:not(.ant-menu-item-selected):hover:before {
//     width: 100%;
//   }
//   /deep/ .ant-menu-submenu-title:hover:before {
//     width: 100%;
//   }
// }

// .menu-light{
//   /deep/ .ant-menu-item:not(.ant-menu-item-selected):before
//    {
//     background: rgba(24, 144, 255, 0.5);
//   }
//   /deep/ .ant-menu-submenu-title:before
//    {
//     background: rgba(24, 144, 255, 0.5);
//   }
// }

// .menu-dark{
//   /deep/ .ant-menu-item:not(.ant-menu-item-selected):before
//    {
//     background: #0c4e8b;
//   }
//   /deep/ .ant-menu-submenu-title:before
//    {
//     background: #0c4e8b;
//   }
// }

// .ant-menu-light {
//   .menu-common();
//   .menu-light();
// }

// .ant-menu-dark {
//   .menu-common();
//   .menu-dark();
// }

.logo {
  display: flex;
  height: 2rem;
  align-items: center;
  margin: 1rem;
  .system-name {
    font-size: 1rem;
    min-width: 8rem;
  }
  img {
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
  }
}
</style>